<template>
  <div class="left-nav">
    <div class="sign"></div>
    <div class="divider"></div>

    <div class="nav-main">
      <el-scrollbar>
        <template v-for="(route, index) in sidebarRouters" :key="index">
          <p
            :class="['nav-item', flag === getPath(route) || getPath(route).includes(flag) ? 'active' : '']"
            v-if="!route.hidden"
            @click="tabChange(getPath(route))"
          >
            {{ route.children && route.children[0]?.meta.title }}
          </p>
        </template>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, watch} from "vue";
import {RouteOption, useRoute, useRouter} from "vue-router";
import usePermissionStore from "@/store/modules/permission";

const permissionStore = usePermissionStore()
const sidebarRouters = computed<RouteOption[]>(() => permissionStore.sidebarRouters);
const route = useRoute();
const router = useRouter();
const flag = ref('');

function getPath(route: any): string {
  return route.children && route.children[0]?.path || '1'
}

function tabChange(type: string) {
  flag.value = type;
  router.push(type)
}

watch(() => route, (val: any) => {
  flag.value = val.meta.belong || val.name || 'pageHome'
}, {immediate: true, deep: true})
</script>

<style scoped lang="scss">
.left-nav {
  position: absolute;
  top: 40px;
  left: 210px;
  width: 250px;
  height: calc(100% - 60px);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 5px 20px 0 rgba(25, 65, 97, 0.2);
  backdrop-filter: blur(10px);

  .sign {
    width: 160px;
    height: 66px;
    margin: 60px auto 0;
    background: url('../../assets/logo.png') no-repeat center;
    background-size: 100% 100%;
  }

  .divider {
    width: 190px;
    height: 1px;
    margin: 30px auto 0;
    border: 1px solid #BBBBBB;
  }

  .nav-main {
    height: calc(100% - 194px);
    margin: 34px 0 0 30px;
    padding-left: 32px;
    font-size: 16px;
    color: #999;

    .nav-item {
      height: 52px;
      line-height: 52px;
      cursor: pointer;

      &.active {
        position: relative;
        color: #ff4350;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: -30px;
          width: 12px;
          height: 16px;
          background: url('../../assets/nav-active.png') no-repeat center;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
